<template>
  <div class="login-container w-full h-full flex items-center justify-center">
    <div
      class="login w-[60rem] h-[40rem] bg-[#fff] shadow-[0px_2px_10px_0px_rgba(0,0,0,0.29)] rounded flex"
    >
      <div class="login-left w-[20rem] h-full">
        <div class="w-full h-full bg-[rgba(0,79,255,0.3)]"></div>
      </div>
      <div class="login-right w-[40rem] h-full flex justify-center">
        <div class="pt-[8rem] w-[24rem]">
          <p class="text-center text-3xl font-bold mb-[2rem]">欢迎登录</p>
          <ul
            class="flex justify-center text-base font-bold border-b border-b-1 border-b-[#D1D9FF] mb-12"
          >
            <li class="active px-2 mx-6 pb-1 cursor-pointer">企业客户</li>
            <li class="px-2 mx-6 pb-1 cursor-pointer">金融机构</li>
          </ul>
          <el-form ref="loginFormRef" label-width="100px" :model="loginForm" :rules="loginFormRule">
            <el-form-item class="text-base" prop="phone">
              <el-input v-model="loginForm.phone" placeholder="手机号" size="large">
                <template #prefix
                  ><el-icon><Avatar /></el-icon> </template
              ></el-input>
            </el-form-item>
            <el-form-item class="text-base" prop="code">
              <el-row>
                <el-col :span="20">
                  <el-input v-model="loginForm.code" placeholder="验证码" size="large">
                    <template #prefix
                      ><el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="4">
                  <el-button size="large" color="#276AED">获取验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <span
            class="inline-block text-[#fff] cursor-pointer py-4 mt-4 rounded-full w-full text-center bg-[#276AED]"
            @click="login()"
            >登录</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import { initDynamicRouter } from '@/router/dynamicRouter'
import ApiModules from '@/http'

// 使用new URL获取本地图片路径
// const localBgImageUrl = new URL('../../assets/images/login_form.jpg', import.meta.url).href
const { LOGINAPI } = ApiModules
const { global } = useStore()
const router = useRouter()
const loginForm = reactive({
  phone: '',
  code: '',
})
const loginFormRef = ref()
const loginFormRule = reactive({
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
})

const getLoginInfo = async () => {
  const { data } = await LOGINAPI.loginFetch()
  global.setToken(data.access_token)
  await initDynamicRouter()
  router.push('/home')
}
const login = async () => {
  if (!loginFormRef.value) return
  await loginFormRef.value.validate((valid) => {
    if (valid) {
      getLoginInfo()
    }
  })
}
</script>
<style lang="less" scoped>
.login-container {
  background-image: url('../../assets/images/login_bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-left {
  background-image: url('../../assets/images/login_form.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-right {
  p {
    font-family: DingTalk, sans-serif;
  }

  ul {
    .active {
      color: #276aed;
      border-bottom: 3px solid #276aed;
    }
  }
}
</style>
<style lang="less">
.login-container {
  .login-right {
    .el-form-item {
      margin-bottom: 2rem;
    }
    /* stylelint-disable-next-line selector-class-pattern */
    .el-form-item__content {
      margin-left: 0 !important;
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .el-input__wrapper {
      box-shadow: none;
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .el-input__wrapper.is-focus {
      box-shadow: none;
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .el-input-group__append {
      box-shadow: none;
    }
  }
}
</style>
